<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebSocket Demo</title>
    <link rel="stylesheet" type="text/css" href="./chatRoom.css">

</head>
<body>
    <h1>聊不来一点 聊天室</h1>
    <div id="chatId"></div> <!-- 用于显示聊天ID -->
    <div id="chatContainer">
        <div id="chatWindow">
            <div id="message">
                <div id="MsgTip_Top">
                    <div id="UserAccountBox">您的账号为：<span id="UserAccount">__</span></div>
                    <div id="OnlineUsersNumberBox">当前在线人数：<span id="OnlineUsersNumber">__</span></div>
                </div><br>
            </div>
        </div>
        <div id="typingIndicator"></div>
        <div id="inputContainer">
            <input id="text" type="text" placeholder="输入消息..."  />
            <button onclick="send()">发送消息</button>
            <button onclick="closeWebSocket()">关闭连接</button>
            <button onclick="logOut()">退出登录</button>
        </div>
    </div>
</body>

<script type="text/javascript">

    let path = "wss://86064b46x6.vicp.fun:443" //后端路径
    // let path = "ws://localhost:8080"

    var websocket = null;
    // var clientId = Math.random().toString(36).substr(2);
    var clientId = localStorage.getItem('userAccount');
    var clientName = localStorage.getItem('userName');

    if(!clientId){
        window.location.href = 'login.html'; //如果没登录，则重定向页面
    }

    document.querySelector('#UserAccount').innerHTML = clientId //显示当前用户账号
    document.querySelector('#OnlineUsersNumber').innerHTML = '__' //显示当前用户账号



    //判断当前浏览器是否支持WebSocket
    if('WebSocket' in window){
        //连接WebSocket节点
        // websocket = new WebSocket("ws://localhost:8080/ws/"+clientId);
        websocket = new WebSocket(path + "/ws/"+clientName);
    }
    else{
        alert('当前浏览器不支持WebSocket！')
    }


// #region ***** ***** ***** ***** websocket的四种回调方法
    //连接发生错误的回调方法
    websocket.onerror = function(){
        setMessageInnerHTML("聊天室连接发生错误");
    };

    //连接成功建立的回调方法
    websocket.onopen = function(){
        setMessageInnerHTML("聊天室连接成功");
    };

//接收到后端消息的回调方法----------
    websocket.onmessage = function(event){
 
        let parseData = JSON.parse(event.data) //将接收到的JSON格式的字符串解析成一个JavaScript对象

        //是系统提示消息
        if(parseData.data.type == 'SYS_MSG_OnlineUserNumber'){
            setSystemMessageInnerHTML(parseData.data.content);
        }
        //是用户之间聊天消息
        if(parseData.data.type == 'chat'){
            setMessageInnerHTML(parseData.data.content); 
        }
        
    };

    //连接关闭的回调方法
    websocket.onclose = function(){
        setMessageInnerHTML("聊天室连接已关闭");
    };
// #endregion



    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function(){
        websocket.close();
    }


    //发送消息
    function send(){
        var message = document.getElementById('text').value;
        document.getElementById('text').value = ''
        if(message != '' ){
            websocket.send(message); //发到聊天室的后端
        }
        else{
            alert("不允许发送空消息!")
        }
    
    }
	
	//关闭连接
    function closeWebSocket() {
        websocket.close();
    }


    //将消息显示在网页上（用户聊天信息）
    function setMessageInnerHTML(innerHTML){
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }
     //将消息显示在网页上（系统提示信息）
     function setSystemMessageInnerHTML(innerHTML){
        document.getElementById('OnlineUsersNumber').innerHTML = innerHTML;
    }


    //退出登录
    function logOut(){
        localStorage.removeItem('userAccount'); //将用户账号存储到本地
        localStorage.removeItem('userName'); //将用户名存储到本地
        window.location.href = 'login.html'; //重定向页面
    }


    document.addEventListener('keydown', function(event) {
    // 检查目标元素是否是输入框
    if (event.target.tagName === 'INPUT' && event.key === 'Enter') {
        event.preventDefault();
        send();
    }
});


</script>
</html>
